<template>
  <div class="addDetail">
    <van-nav-bar
      title="搜 索 地 址"
      left-arrow
      @click-left="$router.back()"
      class="navBar"
    />

    <van-cell-group class="search">
      <van-field placeholder="请输入用户名" v-model="keyword" />
      <van-button type="info" @click="search">确 认</van-button>
    </van-cell-group>
    <van-notice-bar :scrollable="false"
      >为了满足商家的送餐要求，建议您从列表中选择地址</van-notice-bar
    >

    <van-cell
      v-for="(item, index) in addresses"
      :key="index"
      :title="item.name"
      :label="item.address"
      @click="select(item)"
    />
  </div>
</template>

<script>
import { searchAddress } from "@/api/profile";

export default {
  name: "addDetail",
  data() {
    return {
      keyword: "",
      addresses: [],
    };
  },
  methods: {
    // 搜索地址列表
    async search() {
      const { data } = await searchAddress(this.keyword);
      data.length ? this.addresses = data:this.$toast.fail('搜索地址失败!');
    },
    // 选择具体地址
    select(val) {
      this.$router.back()
      this.$store.commit('setAddress',val)
    },
  },
};
</script>

<style lang="less" scoped>
.addDetail {
  /deep/.navBar {
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-arrow-left {
      font-size: 18px;
      color: #fff;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
    .van-field {
      width: 276px;
      border: 1px solid #ccc;
    }
    .van-button--info {
      width: 70px;
      font-size: 16px;
    }
  }
}
</style>
